<script setup>
import { ref } from 'vue'
import BusinessAnalysis from '@/components/Index/BusinessAnalysis.vue'
import HotSellingProducts from '@/components/Index/HotSellingProducts.vue'
import PaymentMethodRanking from '@/components/Index/PaymentMethodRanking.vue'
import PopularCategories from '@/components/Index/PopularCategories.vue'
import SalesDrend from '@/components/Index/SalesDrend.vue'
</script>

<template>
  <el-card>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="24">
        <BusinessAnalysis /> 
      </el-col>
    </el-row>
    <el-row style="margin-bottom: 20px;">
      <el-col :span="16">
        <SalesDrend />
      </el-col>
      <el-col :span="8">
        <HotSellingProducts />
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <PaymentMethodRanking />
      </el-col>
      <el-col :span="12">
        <PopularCategories />
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped></style>
